<template>
  <view style="width: 100%; height: 100%; text-align: center">
    <image
      :src="posterImage"
      mode="aspectFit"
      style="width: 100%"
      v-if="posterImage"
    ></image>
    <l-painter
      :board="posterData"
      :isCanvasToTempFilePath="true"
      @success="handleSuccess"
      @error="handleError"
      :hidden="false"
    ></l-painter>
  </view>
</template>

<script>
import { getJsonData } from "../../api";
export default {
  data() {
    return {
      posterImage: "",
      initialJson: {
        css: {
          width: "100%",
          textAlign: "center",
        },
        views: [
          {
            type: "image",
            css: {
              width: "692rpx",
              height: "2093rpx",
              position: "relative",
              marginLeft: "32rpx",
              objectFit: "cover",
            },
            src: "@/static/bg.jpg",
          },
          {
            type: "image",
            css: {
              width: "500rpx",
              height: "500rpx",
              objectFit: "cover",
              position: "absolute",
              top: "4%",
              left: "50%",
              marginLeft: "-228rpx",
            },
            src: "@/static/ren.jpg",
          },
        ],
      },
      initialViews: [
        {
          type: "image",
          css: {
            width: "692rpx",
            height: "2093rpx",
            position: "relative",
            marginLeft: "32rpx",
            objectFit: "cover",
          },
          src: "@/static/bg.jpg",
        },
        {
          type: "image",
          css: {
            width: "500rpx",
            height: "500rpx",
            objectFit: "cover",
            position: "absolute",
            top: "4%",
            left: "50%",
            marginLeft: "-228rpx",
          },
          src: "@/static/ren.jpg",
        },
      ],
      getData: [],
      posterData: {},
    };
  },
  onShow() {
    if (uni.getSystemInfoSync().platform === "h5") {
      // getJsonData({id:111}).then((res) => {
      //   if (res.statusCode == 200) {
      //     this.getData = res.data;
      //     this.initialJson.views.push(...this.getData);
      //     this.posterData = JSON.parse(JSON.stringify(this.initialJson));
      //   } else {
      //     console.log("获取数据失败");
      //   }
      // });
    }

    this.getData = [
      {
        type: "text",
        text: "赵 伟",
        css: {
          fontSize: "72rpx",
          fontWeight: "bold",
          color: "#333333",
          position: "absolute",
          top: "30%",
          left: "50%",
          marginLeft: "-60rpx",
        },
      },
      {
        type: "text",
        text: "北京市城市管理",
        css: {
          fontSize: "40rpx",
          fontWeight: "bold",
          color: "#333333",
          position: "absolute",
          top: "36%",
          left: "50%",
          marginLeft: "-120rpx",
        },
      },
      {
        type: "text",
        text: "综合行政执法局",
        css: {
          fontSize: "40rpx",
          fontWeight: "bold",
          color: "#333333",
          position: "absolute",
          top: "39%",
          left: "50%",
          marginLeft: "-120rpx",
        },
      },
      {
        type: "text",
        text: "01000099058",
        css: {
          fontSize: "40rpx",
          fontWeight: "bold",
          color: "#333333",
          position: "absolute",
          top: "43%",
          left: "50%",
          marginLeft: "-120rpx",
        },
      },
      {
        type: "text",
        text: "北京市人民政府监制",
        css: {
          fontSize: "40rpx",
          fontWeight: "bold",
          color: "#333333",
          position: "absolute",
          top: "90%",
          left: "50%",
          marginLeft: "-170rpx",
        },
      },
      {
        type: "text",
        text: "有效期至2025年5月29日",
        css: {
          fontSize: "40rpx",
          fontWeight: "bold",
          color: "#333333",
          position: "absolute",
          top: "93%",
          left: "50%",
          marginLeft: "-210rpx",
        },
      },
    ];
    this.initialJson.views.push(...this.getData);
    this.posterData = JSON.parse(JSON.stringify(this.initialJson));
  },
  methods: {
    handleSuccess(e) {
      console.log("生成成功！");
      this.posterImage = e.tempFilePath;
      this.initialJson.views = this.initialViews; // 恢复初始视图
    },
    handleError(err) {
      console.error("生成海报时发生错误：", err);
      this.initialJson.views = this.initialViews; // 恢复初始视图
    },
  },
};
</script>
